<template>
  <div class="hello">
    <button @click="del">-</button>
    <b v-text="num" v-show="show"></b>
    <button @click="add">+</button>
    <p v-text="name"></p>
    <button @click="autoShow">隐藏/回显</button>
    <button @click="getTodo">发送请求</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      num: 0,
      name: "康哥",
      show: true,
    };
  },
  methods: {
    add: function () {
      if (this.num != 10) {
        this.num++;
        return;
      }
      alert("不能再添加了！");
    },
    del: function () {
      if (this.num != 0) {
        this.num--;
        return;
      }
      alert("不能再减少了！");
    },
    autoShow: function () {
      this.show = !this.show;
    },
    getTodo() {
      let t = this;
      this.$http({
        method: "post",
        url: "/findById",
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: {
          'name': '张三', //传的参数
        },
      })
        .then((result) => {
          console.log(result);
        })
        .catch((err) => {
          console.log("======" + err);
        });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
